Search.setVisibility_ - Code Metrics - Inspection of "refactor admin scripts" - pryley/site-reviews - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 33081a...0dd98d )

by Paul

created 2018-06-11 15:24 UTC

Search.setVisibility_ A

↳ Parent: +/scripts/admin/search.js

Complexity

Conditions	2
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	2
nc	1
nop	0
dl	0
loc	4
rs	10
c	0
b	0
f	0

/** global: GLSR, jQuery */
;(function( _, wp, x ) {

	'use strict';

	var Search = function( selector, options ) {
		this.el = x( selector );
		this.options = options;
		this.searchTerm = null;
		this.init_();
	};

	Search.prototype = {
		defaults: {
			action: null,
			exclude: [],
			onInit: null,
			onResultClick: null,
			results: {},
			selected: -1,
			selectedClass: 'glsr-selected-result',
			selectorEntries: '.glsr-strings-table tbody',
			selectorResults: '.glsr-search-results',
			selectorSearch: '.glsr-search-input',
			// entriesEl
			// resultsEl
			// searchEl
		},

		/** @return void */
		init_: function() {
			this.options = x.extend( {}, this.defaults, this.options );
			if( !this.el.length )return;
			this.options.entriesEl = this.el.parent().find( this.options.selectorEntries );
			this.options.resultsEl = this.el.find( this.options.selectorResults );
			this.options.searchEl = this.el.find( this.options.selectorSearch );
			this.options.searchEl.attr( 'aria-describedby', 'live-search-desc' );
			if( typeof this.options.onInit === 'function' ) {
				this.options.onInit.call( this );
			}
			this.initEvents_();
		},

		/** @return void */
		initEvents_: function() {
			this.options.searchEl.on( 'input', _.debounce( this.onSearchInput_.bind( this ), 500 ));
			this.options.searchEl.on( 'keyup', this.onSearchKeyup_.bind( this ));
			this.options.searchEl.on( 'keydown keypress', function( ev ) {
				if( GLSR.keys.ENTER !== ev.which )return;
				ev.preventDefault();
			});
			x( document ).on( 'click', this.onDocumentClick_.bind( this ));
			x( document ).on( 'keydown', this.onDocumentKeydown_.bind( this ));
		},

		/** @return void */
		abort_: function() {
			if( 'undefined' === typeof this.searchRequest )return;
			this.searchRequest.abort();
		},

		/** @return void */
		clearResults_: function() {
			this.abort_();
			this.options.resultsEl.empty();
			this.el.removeClass( 'is-active' );
			x( 'body' ).removeClass( 'glsr-focus' );
		},

		/** @return void */// Manage entries
		deleteEntry_: function( index ) {
			var row = this.options.entriesEl.children( 'tr' ).eq( index );
			var search = this;
			row.find( 'td' ).css({ backgroundColor:'#faafaa' });
			row.fadeOut( 350, function() {
				x( this ).remove();
				search.options.results = {};
				search.reindexRows_();
				search.setVisibility_();
			});
		},

		/** @return void */
		displayResults_: function( items ) {
			x( 'body' ).addClass( 'glsr-focus' );
			this.options.resultsEl.append( items );
			this.options.resultsEl.children( 'span' ).on( 'click', this.onResultClick_.bind( this ));
		},

		/** @return void */// Manage entries
		makeSortable_: function() {
			this.options.entriesEl.on( 'click', 'a.delete', this.onEntryDelete_.bind( this ));
			this.options.entriesEl.sortable({
				items: 'tr',
				tolerance: 'pointer',
				start: function( ev, ui ) {
					ui.placeholder.height( ui.helper[0].scrollHeight );
				},
				sort: function( ev, ui ) {
					var top = ev.pageY - x( this ).offsetParent().offset().top - ( ui.helper.outerHeight( true ) / 2 );
					ui.helper.css({
						top: top + 'px',
					});
				},
			});
		},

		/** @return void */
		navigateResults_: function( diff ) {
			this.options.selected += diff;
			this.options.results.removeClass( this.options.selectedClass );
			if( this.options.selected < 0 ) {
				// reached the start (should now allow keydown scroll)
				this.options.selected = -1;
				this.options.searchEl.focus();
			}
			if( this.options.selected >= this.options.results.length ) {
				// reached the end (should now allow keydown scroll)
				this.options.selected = this.options.results.length - 1;
			}
			if( this.options.selected >= 0 ) {
				this.options.results.eq( this.options.selected )
					.addClass( this.options.selectedClass )
					.focus();
			}
		},

		/** @return void */
		onDocumentClick_: function( ev ) {
			if( x( ev.target ).find( this.el ).length && x( 'body' ).hasClass( 'glsr-focus' )) {
				this.clearResults_();
			}
		},

		/** @return void */
		onDocumentKeydown_: function( ev ) {
			if( !this.options.results )return;
			if( GLSR.keys.ESC === ev.which ) {
				this.clearResults_();
			}
			if( GLSR.keys.ENTER === ev.which || GLSR.keys.SPACE === ev.which ) {
				var selected = this.options.resultsEl.find( '.' + this.options.selectedClass );
				if( selected ) {
					selected.trigger( 'click' );
				}
			}
			if( GLSR.keys.UP === ev.which ) {
				ev.preventDefault();
				this.navigateResults_(-1);
			}
			if( GLSR.keys.DOWN === ev.which ) {
				ev.preventDefault();
				this.navigateResults_(1);
			}
		},

		/** @return void */// Manage entries
		onEntryDelete_: function( ev ) {
			ev.preventDefault();
			this.deleteEntry_( x( ev.target ).closest( 'tr' ).index() );
		},

		/** @return void */
		onResultClick_: function( ev ) {
			ev.preventDefault();
			if( typeof this.options.onResultClick === 'function' ) {
				this.options.onResultClick.call( this, ev );
			}
			this.clearResults_();
		},

		/** @return void */
		onSearchInput_: function( ev ) {
			this.abort_();
			if( this.searchTerm === ev.target.value && this.options.results.length ) {
				return this.displayResults_( this.options.results );
			}
			this.options.resultsEl.empty();
			this.options.selected = -1;
			this.searchTerm = ev.target.value;
			if( this.searchTerm === '' ) {
				return this.reset_();
			}
			this.el.addClass( 'is-active' );
			this.searchRequest = wp.ajax.post( GLSR.action, {
				request: {
					action: this.options.action,
					exclude: this.options.exclude,
					nonce: this.el.find( '#_search_nonce' ).val(),
					search: this.searchTerm,
				},
			}).done( function( response ) {
				this.el.removeClass( 'is-active' );
				this.displayResults_( response.items ? response.items : response.empty );
				this.options.results = this.options.resultsEl.children();
				delete this.searchRequest;
			}.bind( this ));
		},

		/** @return void */
		onSearchKeyup_: function( ev ) {
			if( GLSR.keys.ESC === ev.which ) {
				this.reset_();
			}
			if( GLSR.keys.ENTER === ev.which ) {
				this.onSearchInput_( ev );
				ev.preventDefault();
			}
		},

		/** @return void */// Manage entries
		onUnassign: function( ev ) {
			ev.preventDefault();
			var assigned = this.el.find( '.description' );
			this.el.find( 'input#assigned_to' ).val( '' );
			assigned.find( 'a' ).css({ color:'#c00' });
			assigned.fadeOut( 'fast', function() {
				x( this ).html( '' ).show();
			});
		},

		/** @return void */// Manage entries
		reindexRows_: function() {
			var search = this;
			this.options.exclude = [];
			this.options.entriesEl.children( 'tr' ).each( function( index ) {
				x( this ).find( '.glsr-string-td2' ).children().filter( ':input' ).each( function() {
					var input = x( this );
					var name = input.attr( 'name' ).replace( /\[\d+\]/i, '[' + index + ']' );
					input.attr( 'name', name );
					if( input.is( '[data-id]' )) {
						search.options.exclude.push({ id: input.val() });
					}
				});
			});
		},

		/** @return void */
		reset_: function() {
			this.clearResults_();
			this.options.results = {};
			this.options.searchEl.val( '' );
		},

		/** @return void */// Manage entries
		setVisibility_: function() {
			var action = this.options.entriesEl.children().length > 0 ? 'remove' : 'add';
			this.options.entriesEl.parent()[action + 'Class']( 'glsr-hidden' );
		},
	};

	GLSR.Search = Search;
})( window._, window.wp, jQuery );


1			/** global: GLSR, jQuery */
2			;(function( _, wp, x ) {
3
4			'use strict';
5
6			var Search = function( selector, options ) {
7			this.el = x( selector );
8			this.options = options;
9			this.searchTerm = null;
10			this.init_();
11			};
12
13			Search.prototype = {
14			defaults: {
15			action: null,
16			exclude: [],
17			onInit: null,
18			onResultClick: null,
19			results: {},
20			selected: -1,
21			selectedClass: 'glsr-selected-result',
22			selectorEntries: '.glsr-strings-table tbody',
23			selectorResults: '.glsr-search-results',
24			selectorSearch: '.glsr-search-input',
25			// entriesEl
26			// resultsEl
27			// searchEl
28			},
29
30			/** @return void */
31			init_: function() {
32			this.options = x.extend( {}, this.defaults, this.options );
33			if( !this.el.length )return;
34			this.options.entriesEl = this.el.parent().find( this.options.selectorEntries );
35			this.options.resultsEl = this.el.find( this.options.selectorResults );
36			this.options.searchEl = this.el.find( this.options.selectorSearch );
37			this.options.searchEl.attr( 'aria-describedby', 'live-search-desc' );
38			if( typeof this.options.onInit === 'function' ) {
39			this.options.onInit.call( this );
40			}
41			this.initEvents_();
42			},
43
44			/** @return void */
45			initEvents_: function() {
46			this.options.searchEl.on( 'input', _.debounce( this.onSearchInput_.bind( this ), 500 ));
47			this.options.searchEl.on( 'keyup', this.onSearchKeyup_.bind( this ));
48			this.options.searchEl.on( 'keydown keypress', function( ev ) {
49			if( GLSR.keys.ENTER !== ev.which )return;
50			ev.preventDefault();
51			});
52			x( document ).on( 'click', this.onDocumentClick_.bind( this ));
53			x( document ).on( 'keydown', this.onDocumentKeydown_.bind( this ));
54			},
55
56			/** @return void */
57			abort_: function() {
58			if( 'undefined' === typeof this.searchRequest )return;
59			this.searchRequest.abort();
60			},
61
62			/** @return void */
63			clearResults_: function() {
64			this.abort_();
65			this.options.resultsEl.empty();
66			this.el.removeClass( 'is-active' );
67			x( 'body' ).removeClass( 'glsr-focus' );
68			},
69
70			/** @return void */// Manage entries
71			deleteEntry_: function( index ) {
72			var row = this.options.entriesEl.children( 'tr' ).eq( index );
73			var search = this;
74			row.find( 'td' ).css({ backgroundColor:'#faafaa' });
75			row.fadeOut( 350, function() {
76			x( this ).remove();
77			search.options.results = {};
78			search.reindexRows_();
79			search.setVisibility_();
80			});
81			},
82
83			/** @return void */
84			displayResults_: function( items ) {
85			x( 'body' ).addClass( 'glsr-focus' );
86			this.options.resultsEl.append( items );
87			this.options.resultsEl.children( 'span' ).on( 'click', this.onResultClick_.bind( this ));
88			},
89
90			/** @return void */// Manage entries
91			makeSortable_: function() {
92			this.options.entriesEl.on( 'click', 'a.delete', this.onEntryDelete_.bind( this ));
93			this.options.entriesEl.sortable({
94			items: 'tr',
95			tolerance: 'pointer',
96			start: function( ev, ui ) {
97			ui.placeholder.height( ui.helper[0].scrollHeight );
98			},
99			sort: function( ev, ui ) {
100			var top = ev.pageY - x( this ).offsetParent().offset().top - ( ui.helper.outerHeight( true ) / 2 );
101			ui.helper.css({
102			top: top + 'px',
103			});
104			},
105			});
106			},
107
108			/** @return void */
109			navigateResults_: function( diff ) {
110			this.options.selected += diff;
111			this.options.results.removeClass( this.options.selectedClass );
112			if( this.options.selected < 0 ) {
113			// reached the start (should now allow keydown scroll)
114			this.options.selected = -1;
115			this.options.searchEl.focus();
116			}
117			if( this.options.selected >= this.options.results.length ) {
118			// reached the end (should now allow keydown scroll)
119			this.options.selected = this.options.results.length - 1;
120			}
121			if( this.options.selected >= 0 ) {
122			this.options.results.eq( this.options.selected )
123			.addClass( this.options.selectedClass )
124			.focus();
125			}
126			},
127
128			/** @return void */
129			onDocumentClick_: function( ev ) {
130			if( x( ev.target ).find( this.el ).length && x( 'body' ).hasClass( 'glsr-focus' )) {
131			this.clearResults_();
132			}
133			},
134
135			/** @return void */
136			onDocumentKeydown_: function( ev ) {
137			if( !this.options.results )return;
138			if( GLSR.keys.ESC === ev.which ) {
139			this.clearResults_();
140			}
141			if( GLSR.keys.ENTER === ev.which \|\| GLSR.keys.SPACE === ev.which ) {
142			var selected = this.options.resultsEl.find( '.' + this.options.selectedClass );
143			if( selected ) {
144			selected.trigger( 'click' );
145			}
146			}
147			if( GLSR.keys.UP === ev.which ) {
148			ev.preventDefault();
149			this.navigateResults_(-1);
150			}
151			if( GLSR.keys.DOWN === ev.which ) {
152			ev.preventDefault();
153			this.navigateResults_(1);
154			}
155			},
156
157			/** @return void */// Manage entries
158			onEntryDelete_: function( ev ) {
159			ev.preventDefault();
160			this.deleteEntry_( x( ev.target ).closest( 'tr' ).index() );
161			},
162
163			/** @return void */
164			onResultClick_: function( ev ) {
165			ev.preventDefault();
166			if( typeof this.options.onResultClick === 'function' ) {
167			this.options.onResultClick.call( this, ev );
168			}
169			this.clearResults_();
170			},
171
172			/** @return void */
173			onSearchInput_: function( ev ) {
174			this.abort_();
175			if( this.searchTerm === ev.target.value && this.options.results.length ) {
176			return this.displayResults_( this.options.results );
177			}
178			this.options.resultsEl.empty();
179			this.options.selected = -1;
180			this.searchTerm = ev.target.value;
181			if( this.searchTerm === '' ) {
182			return this.reset_();
183			}
184			this.el.addClass( 'is-active' );
185			this.searchRequest = wp.ajax.post( GLSR.action, {
186			request: {
187			action: this.options.action,
188			exclude: this.options.exclude,
189			nonce: this.el.find( '#_search_nonce' ).val(),
190			search: this.searchTerm,
191			},
192			}).done( function( response ) {
193			this.el.removeClass( 'is-active' );
194			this.displayResults_( response.items ? response.items : response.empty );
195			this.options.results = this.options.resultsEl.children();
196			delete this.searchRequest;
197			}.bind( this ));
198			},
199
200			/** @return void */
201			onSearchKeyup_: function( ev ) {
202			if( GLSR.keys.ESC === ev.which ) {
203			this.reset_();
204			}
205			if( GLSR.keys.ENTER === ev.which ) {
206			this.onSearchInput_( ev );
207			ev.preventDefault();
208			}
209			},
210
211			/** @return void */// Manage entries
212			onUnassign: function( ev ) {
213			ev.preventDefault();
214			var assigned = this.el.find( '.description' );
215			this.el.find( 'input#assigned_to' ).val( '' );
216			assigned.find( 'a' ).css({ color:'#c00' });
217			assigned.fadeOut( 'fast', function() {
218			x( this ).html( '' ).show();
219			});
220			},
221
222			/** @return void */// Manage entries
223			reindexRows_: function() {
224			var search = this;
225			this.options.exclude = [];
226			this.options.entriesEl.children( 'tr' ).each( function( index ) {
227			x( this ).find( '.glsr-string-td2' ).children().filter( ':input' ).each( function() {
228			var input = x( this );
229			var name = input.attr( 'name' ).replace( /\[\d+\]/i, '[' + index + ']' );
230			input.attr( 'name', name );
231			if( input.is( '[data-id]' )) {
232			search.options.exclude.push({ id: input.val() });
233			}
234			});
235			});
236			},
237
238			/** @return void */
239			reset_: function() {
240			this.clearResults_();
241			this.options.results = {};
242			this.options.searchEl.val( '' );
243			},
244
245			/** @return void */// Manage entries
246			setVisibility_: function() {
247			var action = this.options.entriesEl.children().length > 0 ? 'remove' : 'add';
248			this.options.entriesEl.parent()[action + 'Class']( 'glsr-hidden' );
249			},
250			};
251
252			GLSR.Search = Search;
253			})( window._, window.wp, jQuery );
254

pryley / site-reviews

Push — master ( 33081a...0dd98d )

Search.setVisibility_ A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like